<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>笑话大全</title>
    <style>
        .app {
            width: 600px;
            margin: 0 auto;
        }

        .head {
            height: 70px;
            position: relative;
        }

        .logo {
            width: 200px;
            height: 70px;
            position: absolute;
            left: 10px;
            background: url(./images/logo.png) no-repeat;
            background-size: 100%;

        }

        .btn {
            position: absolute;
            right: 10px;
            top: 20px;
            width: 200px;
            height: 30px;
            border-radius: 5px;
        }

        .main {
            height: 400px;
            margin-left: 30px;
            background: url(./images/bean01.png) no-repeat;
            padding: 20px 120px 230px 35px;
            /* overflow: auto; */
            box-sizing: border-box;
        }

        .main p {
            margin-top: 10px;
            width: 100%;
            height: 100%;
            overflow: auto;
            text-indent: 2em;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="head">
            <div class="logo"><a href="index.html"></a></div>
            <button class="btn">点我我给你换个笑话</button>
        </div>
        <div class="main">
            <p>加载中...</p>
        </div>
    </div>

    <script src="./js/jquery-1.12.4.js"></script>
    <script type='text/javascript'>
        function getJock() {
            $.ajax({
                url: 'https://api.ixiaowai.cn/tgrj/index.php',
                success: function (backData) {
                    console.log(backData);
                    $('.main p').text(backData);
                }
            })
        }
        getJock();
        $('.btn').on('click', getJock);
    </script>
</body>

</html>